<!--
*@Author: QWP
*@Description: 关注企业风险管理
*@Date: 2024-07-08 09:51:28
-->
<template>
  <a-layout class="f-h-100 s-bg-white" id="test">
    <u-search-header>
      <u-form
        :model="searchF"
        :gutter="16"
        :elements="searchEl"
        class="f-w-auto">
        <a-col>
          <u-icon-button>查询</u-icon-button>
        </a-col>
        <a-col flex="1">
          <a-row justify="end">
            <a-space>
              <u-icon-button itype="add" @click="showEdit = true">新增</u-icon-button>
              <u-icon-button itype="edit" @click="showEdit = true">修改</u-icon-button>
              <u-icon-button itype="delete" @click="">删除 </u-icon-button>
            </a-space>
          </a-row>
        </a-col>
      </u-form>
    </u-search-header>
    <a-layout-content class="f-padding-rl24">
      <u-table
        :columns="columns"
        :data="tabData"
        v-model:pagination="pagenation"></u-table>
    </a-layout-content>
  </a-layout>

  <!-- 编辑弹窗 -->
  <Edit v-model:open="showEdit"
    wrap-class-name="full-modal"
    :title="dialogTitle" />
  
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch } from "vue";
import { useRoute, useRouter, onBeforeRouteUpdate, onBeforeRouteLeave} from "vue-router";
import { _IFormEl } from "@/components/common/form/interface";
import { Button, ColProps, FormItemProps, TableColumnProps, Tag, Image } from "ant-design-vue";
import { CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { numberC, urlFile } from '@/util/common'
import { formatAmt, } from '@/util/format.ts'
import dayjs from "dayjs";
import Edit from './Edit.vue'
import { cloneDeep } from 'lodash'
const route = useRoute();
const router = useRouter();

onMounted(() => {
})

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`
})
const searchF = reactive({
  model: {
    fwzh: "",
    fwzh1: "",
  },
});
const formItemProps: FormItemProps = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const searchEl: Array<_IFormEl> = [
  { label: "企业类型", key: "pc", element: "select", col: { span: 4 }, formItemProps: formItemProps,
    componentProps: { 
      options: [
        { label: '地下矿山', value: '1'},
        { label: '尾矿库', value: '2'},
      ]
    }
  },
  { label: "关键字", key: "option", element: "input", col: { span: 4 }, formItemProps: formItemProps, },
];

// 列表
const tabData = reactive([
  { a: "上海乐娱文化有限公司", fxbt: "限制高消费", fxfxsj: '2024-06-01', fxdj: '重大风险', fxms: '因企业经营不善面临破产', 
    fxclqk: '0待处理', fxclsj: '2024-01-01', fxtp: '无', xgdj: '无'
  },
  { a: "上海乐娱文化有限公司", fxbt: "限制高消费", fxfxsj: '2024-06-01', fxdj: '较大风险', fxms: '因企业经营不善面临破产', 
    fxclqk: '0待处理', fxclsj: '2024-01-01', fxtp: '无', xgdj: '无'
  },
  { a: "上海乐娱文化有限公司", fxbt: "限制高消费", fxfxsj: '2024-06-01', fxdj: '一般风险', fxms: '因企业经营不善面临破产', 
    fxclqk: '0待处理', fxclsj: '2024-01-01', fxtp: '无', xgdj: '无'
  },
  { a: "上海乐娱文化有限公司", fxbt: "限制高消费", fxfxsj: '2024-06-01', fxdj: '低风险', fxms: '因企业经营不善面临破产', 
    fxclqk: '0待处理', fxclsj: '2024-01-01', fxtp: '无', xgdj: '无'
  },
]);
let columns: Array<TableColumnProps> = reactive([
  { dataIndex: "a", title: "企业名称", width: 140 },
  { dataIndex: "fxbt", title: "风险标题", width: 140 },
  { dataIndex: "fxfxsj", title: "风险发现时间", width: 140 },
  { dataIndex: "fxdj", title: "风险等级", width: 140, align: 'center',
    customRender: ({ text }) => {
      const colorObj = {
        '重大风险': { color: '#FFCCC7', style: { color: '#F5222D' } }, 
        '较大风险': { color: '#FFE7BA', style: { color: '#FA8C16' } }, 
        '一般风险': { color: '#FFF1B8', style: { color: '#D4B90A ' } }, 
        '低风险': { color: '#BAE7FF', style: { color: '#1890FF ' } }, 
      }
      return h(Tag, colorObj[text] || {}, text)
    }
  },
  { dataIndex: "fxms", title: "风险描述", minWidth: 140 },
  { dataIndex: "fxclqk", title: "风险处理情况", width: 140,
    customRender: ({ text }) => {
      return h(Button, { type: 'link'}, text)
    }
  },
  { dataIndex: "fxclsj", title: "风险处理时间", width: 140 },
  { dataIndex: "fxtp", title: "风险图片", width: 140,
    customRender: ({text}) => {
      return h(Image, { src: urlFile('login/login.png') })
    }
  },
  { dataIndex: "xgfj", title: "相关附件", width: 140 },
]);

// 编辑
let dialogTitle = ref<string>("新增企业风险信息")
let showEdit = ref<boolean>(false)

</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>
